// Find

@import '../../style/themes/default';
@import '../../style/mixins/index';
@import './param';

@mixin find {
  width: 100%;
  @include flex();
  > label {
    display: inline-block;
    white-space: nowrap;
    height: $--x-find-height;
    line-height: $--x-find-height;
    position: relative;
    color: $--x-text-300;
    font-weight: 600;
    @include text-align();
  }
  &-row {
    flex: 1;
    display: flex;
    align-items: flex-start;
    position: relative;
  }
  &-tags {
    margin: -0.0625rem -0.0625rem -0.0625rem 0.5rem - 0.0625rem;
    > x-tag {
      margin: 0.0625rem;
    }
  }
  &.x-required {
    > label {
      color: $--x-danger;
    }
  }

  &.x-direction {
    &-row {
      > label {
        padding: 0 0.5rem 0 0;
      }
    }
    &-row-reverse {
      > label {
        padding: 0 0 0 0.5rem;
      }
    }
    &-column {
      align-items: inherit;
    }
    &-column-reverse {
      align-items: inherit;
    }
  }
}

@mixin find-dialog {
  flex: 1;
  display: flex;
  &-table {
    flex: 1;
    min-height: 18.75rem;
    height: fit-content;
  }
  &-tree {
    flex: 1;
    min-height: 18.75rem;
    max-height: 25rem;
    overflow-y: auto;
    .x-tree-node-content.x-activated {
      color: $--x-primary;
    }
  }
  &-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    > span {
      flex: 1;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      user-select: none;
    }
  }
  &-tree-table {
    .#{$--x-find-prefix}-dialog-tree {
      flex: initial;
      min-height: initial;
      max-height: initial;
      width: 14rem;
      margin-right: 1rem;
      padding-right: 1rem;
      border-right: $--x-border-base;
    }
    .#{$--x-find-prefix}-dialog-table {
    }
  }
  &-checked {
    margin-left: 1rem;
    border-left: $--x-border-base;
    padding-left: 1rem;
    width: 10rem;
    overflow-y: auto;
    height: 100%;
    x-tag {
      display: block;
      &:not(:first-child) {
        margin-top: 0.5rem;
      }
      .x-tag {
        width: 100%;
        display: flex;
        justify-content: space-between;
        > span {
          flex: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
    &.x-find-empty {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
